<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的店铺</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/hall.css">
    <link rel="stylesheet" href="css/myStore.css">
</head>
<body>
<div class="nav">
    <span class="nav">我的店铺</span>

    <div data-spm="nav" class="op-container">
        <a class="item-button" href="addStore.html" style="display: flex; align-items: center;">
            <img src="image/store.svg" style="object-fit: contain; width: 24px; height: 24px; margin-right: 4px;">
            <div style="margin-right: 16px;">注册小店</div>
        </a>
        <a class="item-button user" href="#"  style="display: flex; align-items: center;">
            <img id="image" src="image/tx.jpg" style="object-fit: contain; width: 50px; height: 50px; margin-right: 10px; border-radius: 50%;">
            <div id="name" class="username" style="margin-right: 16px; font-size: 20px">null</div>
        </a>
    </div>
    <div class="user-info user" id="user-info" style="display: none;">
        <div class="row" hidden >
            <img src="image/tx.jpg" style="object-fit: contain; width: 50px; height: 50px; margin-right: 10px; border-radius: 50%;">
            <div id="userName" class="username" onclick="updateName()" style="margin-right: 16px; font-size: 20px">null</div>
            <div class="updateName" style="margin-right: 16px; font-size: 20px; display: none;">
                <input id="newName" style="margin-right: 16px; font-size: 20px; width: 100px">
                <button type="submit" onclick="postName()" style="margin-right: 16px; font-size: 20px;">确定</button>
            </div>
        </div>
        <div class="row">
            <span>电话：</span>
            <div id="phone" style="margin-right: 16px; font-size: 20px">null</div>
        </div>
        <div class="row">
            <span>邮箱：</span>
            <div id="email" style="margin-right: 16px; font-size: 20px">null</div>
        </div>
        <div class="row">
            <span>用户类型：</span>
            <div id="userType" style="margin-right: 16px; font-size: 20px">null</div>
        </div>
        <div class="row">
            <span>性别：</span>
            <select id="gender" style="margin-right: 16px; font-size: 20px;" >
                <option id="man" value="男">男</option>
                <option id="woman" value="女">女</option>
            </select>
        </div>
        <div class="row">
            <span>年龄：</span>
            <select id="age" style="margin-right: 16px; font-size: 20px;">
                <!-- 使用 JavaScript 动态生成 0 到 100 的选项 -->
            </select>
        </div>
        <a id="updateUser" class="row" href="updateUser.html" style="margin-right: 16px; font-size: 20px;">
            修改密码
        </a>
    </div>
</div>



<div class="store-container">

    <div class="stores" id="stores">
        <a class="store" href="#">
            <img class="store-image" src="image/tx.jpg" >
            <div class="store-name" >这是店铺名</div>
            <div class="store-introduction">这里是一行简介</div>
        </a>
    </div>

</div>

<script src="js/jquery.min.js"></script>
<script src="js/user.js"></script>
<script src="js/store.js"></script>
<script>
    let userId = localStorage.getItem("userId");
    console.log(userId);
    $(document).ready(function() {
        const $aTag = $('.user');
        const $userInfo = $('#user-info');
        let hideTimer;

        $aTag.on('mouseover', function () {
            clearTimeout(hideTimer);
            $userInfo.show();
        });

        $userInfo.on('mouseover', function () {
            clearTimeout(hideTimer);
        });

        $(document).on('mouseout', function (e) {
            const relatedTarget = $(e.relatedTarget);
            if (!relatedTarget.closest($aTag).length && !relatedTarget.closest($userInfo).length) {
                hideTimer = setTimeout(() => {
                    $userInfo.hide();
                }, 200);
            }
        });
        selectUserById(userId, flushUser)
        //更新页面用户信息
        function flushUser(userInfo) {
            $('.username').text(userInfo.name);
            $('#phone').text(userInfo.phone);
            $('#email').text(userInfo.email);
            $('#userType').text(userInfo.userType);
            $('#gender').val(userInfo.gender);
            $('#age').val(userInfo.age);
        }
        //根据用户查询商店
        selectStoreByUser(userId, showStore);
        //拼接商店数据html
        function showStore(stores) {
            const storeBox = $('#stores');
            for (store of stores) {
                let newElement = `
                            <a class="store" href="store.html?storeId=${store.storeId}&storeName=${store.storeName}">
                            <img class="store-image" src="image/tx.jpg" >
                            <div class="store-name" >${store.storeName}</div>
                            <div class="store-introduction">${store.storeIntroduction}</div>
                            </a>`;
                storeBox.append(newElement);
            }
        }
    });

    // 动态生成年龄下拉框选项
    const $ageSelect = $('#age');
    for (let i = 0; i <= 100; i++) {
        $ageSelect.append(`<option value="${i}">${i}</option>`);
    }

    // 为性别 select 元素添加值改变事件处理函数
    $('#gender').change(function () {
        const selectedGender = $(this).val();
        // updateUserGenderById(userId, selectedGender);
        updateUserFieldById(userId,"gender", selectedGender);
    });

    // 为年龄 select 元素添加值改变事件处理函数
    $('#age').change(function () {
        let selectedAge = $(this).val();
        //更新age
        // updateUserAgeById(userId, selectedAge);
        updateUserFieldById(userId,"age", selectedAge);
    });

    //修改昵称
    function updateName() {
        //点击后显示输入框进行修改
        $('#userName').hide();
        $('#newName').val($('#userName').text());
        $('.updateName').show();
    }
    //上传修改的数据并恢复页面
    function postName() {
        updateUserFieldById(userId, "name", $('#newName').val())
        //还原页面并刷新
        $('.updateName').hide();
        $('#userName').show();
        location.reload();
    }

</script>
</body>
</html>